<template>
    <f7-page class="hntsh common-page has-bottom-btns">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>维保记录</f7-nav-title>
            <f7-nav-right> </f7-nav-right>
        </f7-navbar>
        <div class="hear-bg">
        </div>
        <div class="content-box">
            <div class="content-box-top">
                <img width="60"
                    :src="require(`../../../../../../assets/img/qzjx/mobile/${models.model.equipmentType ? models.model.equipmentType.toUpperCase() : 'QT'}.png`)"
                    alt="" class="left-box">
                <div class="right-box">
                    <div class="title-box">
                        <h3>
                            {{ models.model.recordCode }}
                        </h3>
                    </div>
                    <p><span class="key">设备类型：</span><span class="value">{{ models.model.equipmentType |
                        DictItem(controlData.mobileEquipmentType) }}</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="records">
            <div class="title">维保记录</div>
            <f7-list media-list class="search-list" v-if="query.data.length > 0">
                <li v-for="(item, index) in query.data" :key="index" @click="detail(item)">
                    <span>{{ item.maintenanceTime | date }}</span>
                    <span class="tag tag-gray">已完成<van-icon name="arrow" style="margin-left: 3px;"/></span>
                </li>
            </f7-list>
            <v-empty v-else description="暂无数据" />
        </div>
        <f7-toolbar position="bottom" no-shadow class="fff" v-if="canEdit">
            <f7-button fill class="submit-btn" @click="onMaintCreate">登记维保记录</f7-button>
        </f7-toolbar>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/workflowController";
export default class instance extends controller {
    onInit() {
        this.context.registerId = this.$f7route.query.registerId;
        this.context.status = this.$f7route.query.status;
        this.setSearch("registerId", this.$params.registerId, "list")
    }
    onBeforeInit() {
        this.urls = {
            model: "/app/equipment/eqmMobileRegister/getEntity",
            query: "/app/equipment/eqmMobileMaintenancen/query"
        };
    }
    onBeforeQuery(type, conditions, params) {
        if (type == 'form') {
            params.pageAction = 'view'
        } else if (type == 'list') {
            params.length = 9999;
        }
    }
    mixin() {
        return {
            data() {
                return {
                    status: null,// 作业前准备节点的状态
                    models: {
                        model: {}
                    }
                };
            },
            computed: {
                canEdit() {// 施工单位 且未完成
                    return Number(window.localStorage.getItem('mobileEquip-isConOrg')) && this.status != 2
                }
            },
            methods: {
                // 详情
                detail(item) {
                    this.$f7.view.current.router.navigate(`/business/qzjx/mobileEquipment/equip/maint/create?maintenancenId=${item.maintenancenId}&pageAction=view`);
                },
                // 登记维保记录
                onMaintCreate() {
                    this.$f7.view.current.router.navigate(`/business/qzjx/mobileEquipment/equip/maint/create?registerId=${this.models.model.registerId}&engineeId=${this.models.model.engineeId}&pageAction=create`);
                }

            },
        };
    }
}
</script>

<style lang="less" scoped>
@import url("../../../../../../assets/css/commonPage.less");

.hear-bg {
    width: 100%;
    position: absolute;
    top: 44px;
    background: linear-gradient(180deg, #1990ff 0%, rgba(25, 144, 255, 0) 100%);
    height: 92px;
}

.content-box {
    position: relative;
    padding: 15px;
    margin: 10px 16px 10px;
    font-size: 13px;
    background: linear-gradient(196deg, #eff6ff 0%, #ffffff 100%);
    box-shadow: 0px 3px 8px 0px rgba(165, 201, 255, 0.1);
    border-radius: 8px;

    .content-box-top {
        display: flex;
        align-items: flex-start;

        .right-box {
            word-break: break-all;
            flex: 1;
            margin-left: 10px;

            .title-box {
                display: flex;
                justify-content: space-between;
                align-items: center;

                h3 {
                    color: #242424;
                    font-size: 16px;
                    flex: 1;
                    margin: 5px 0 10px;
                }
            }

            p {
                font-size: 13px;
                margin: 0;

                .key {
                    display: inline-block;
                    color: #8995AC;
                }

                .value {
                    color: #61677A;
                }
            }

        }
    }
}

.common-page .search-list {
    padding: 0;
}

.search-list {
    margin: 0;

    li {
        padding: 12px 0;
        font-size: 14px;
        color: #333;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e9edf7;

        &:last-child {
            border-bottom: none;
        }

        .tag {
            font-size: 13px;
            background: #fff;
            color: #61677a;
            border: none;
        }

        .tag-yellow {
            color: #ff9f24;
        }

        .tag-blue {
            color: #3385ff;
        }

        .tag-gray {
            color: #61677a;
        }
    }
}

.records {
    padding: 15px 15px 10px;
    margin: 10px 16px;
    font-size: 13px;
    box-shadow: 0px 3px 8px 0px rgba(165, 201, 255, 0.1);
    border-radius: 8px;
    background: #fff;

    .title {
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        position: relative;
        padding-left: 10px;
        height: 25px;
        line-height: 25px;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            width: 3.5px;
            height: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: #1990ff;
        }
    }
}
</style>
